feature(splitter): Added support for collapsed panes state - #2299

src/components/splitter/splitter.ts:513

• startCollapsed/endCollapsed are declared with reflect: true, but when collapsed state changes via toggle() / _handleExpanderAction() (i.e. by updating _collapsedPane), Lit will only consider _collapsedPane changed and will not re-reflect the start-collapsed / end-collapsed attributes. This can leave attributes stale (e.g. switching collapsed pane from start->end can keep start-collapsed present). Consider explicitly requesting updates for both public properties when _collapsedPane changes so attribute reflection stays consistent.

    this._collapsedPane = target;

    this._internals.setState('start-collapsed', this._isCollapsed('start'));
    this._internals.setState('end-collapsed', this._isCollapsed('end'));

src/components/splitter/splitter.ts:170

• Same as the other @query() fields above: consider re-enabling cached queries to avoid repeated DOM lookups during interaction (consistent with other components, e.g. src/components/button/button-base.ts:54).

  @query('[part~="end-pane"]')
  private readonly _endPane!: HTMLElement;

src/components/splitter/splitter.ts:163

• @query('[part~="base"]') is no longer cached, which is inconsistent with other components that query a stable base part (e.g. src/components/tile-manager/tile.ts:189 uses @query('[part~="base"]', true)). Since <div part="base"> is always rendered here, caching avoids repeated DOM queries on each access and matches established pattern.

  @query('[part~="base"]')

stories/splitter.stories.ts:379

• This demo reads persisted state with JSON.parse(saved) twice and will throw if the stored value is not valid JSON (or if localStorage is blocked). Parsing once and guarding errors makes the story more robust.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const startCollapsed = saved ? JSON.parse(saved).startCollapsed : false;
    const endCollapsed = saved ? JSON.parse(saved).endCollapsed : false;

src/components/splitter/splitter.ts:498

• The PR description says the feature "includes methods to collapse and expand panes", but the public API changes here only add startCollapsed/endCollapsed and reuse the existing toggle() method (no collapse() / expand() methods were added). Please either update the PR description or add the missing methods if they are part of the intended API.

  /** Toggles the collapsed state of the specified pane. */
  public toggle(position: PanePosition): void {
    // If the requested pane is already collapsed, expand it (set to null)
    // Otherwise, collapse the requested pane (this also handles switching from one collapsed pane to another)
    this._applyCollapse(this._collapsedPane === position ? null : position);
  }

stories/splitter.stories.ts:382

• JSON.parse(saved) can throw if localStorage contains invalid/corrupted JSON for the key, which would break the Storybook story render. Consider a small try/catch fallback to treat invalid values as "no saved layout".

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const layout = saved ? JSON.parse(saved) : null;

    const startSize = layout?.startSize ?? '50%';
    const startCollapsed = layout?.startCollapsed ?? false;

src/components/splitter/splitter.ts:508

• startCollapsed/endCollapsed are computed from _collapsedPane, but _applyCollapse() mutates _collapsedPane directly (via toggle() and user interactions). Since Lit reflects attributes only for properties tracked as changed, start-collapsed / end-collapsed can become stale when collapse state changes without going through the corresponding property setters (e.g. clicking collapse buttons or calling toggle()). Trigger requestUpdate() for these reactive accessor properties when _collapsedPane changes so reflection stays in sync.

  private _applyCollapse(target: PanePosition | null): void {
    if (this._collapsedPane === null && target !== null) {
      this._savePaneSizes();
    }

src/components/splitter/splitter.ts:364

• The new boolean property JSDoc uses “Gets/sets…”. In this codebase, boolean property docs generally describe the true state (e.g. “When true…/Whether…”). Updating this avoids inconsistent generated docs/Storybook metadata.

  /**
   * Gets/sets the collapsed state of the end pane.
   * @attr end-collapsed
   * @default false
   */

src/components/splitter/splitter.ts:503

• The PR description mentions adding “methods to collapse and expand panes”, but the code changes introduce startCollapsed/endCollapsed (and reuse toggle()), without new collapse()/expand() public methods. Either update the PR description to match the implemented API, or add explicit methods if they’re part of the intended feature surface.

  /** Toggles the collapsed state of the specified pane. */
  public toggle(position: PanePosition): void {
    // If the requested pane is already collapsed, expand it (set to null)
    // Otherwise, collapse the requested pane (this also handles switching from one collapsed pane to another)
    this._applyCollapse(this._collapsedPane === position ? null : position);
  }

stories/splitter.stories.ts:462

• JSON.parse(saved) can throw if localStorage contains invalid JSON, which would break the Storybook story rendering. Consider parsing defensively and falling back to defaults when the persisted value is corrupted.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const layout = saved ? JSON.parse(saved) : null;

src/components/splitter/splitter.ts:350

• The new boolean property JSDoc uses “Gets/sets…”. In this codebase, boolean property docs generally describe the true state (e.g. “When true…/Whether…”). Updating this avoids inconsistent generated docs/Storybook metadata.

This issue also appears on line 360 of the same file.

  /**
   * Gets/sets the collapsed state of the start pane.
   * @attr start-collapsed
   * @default false
   */

src/components/splitter/splitter.ts:520

• startCollapsed/endCollapsed are declared as reflected properties, but their values are derived from _collapsedPane. When _collapsedPane changes (e.g. via toggle()/UI interactions), Lit will re-render because _collapsedPane is @state(), but it will not reflect start-collapsed/end-collapsed unless those properties are marked as changed via requestUpdate(). This can leave the reflected attributes stale after user-driven collapse/expand.

  private _applyCollapse(target: PanePosition | null): void {
    if (this._collapsedPane === null && target !== null) {
      this._savePaneSizes();
    }

    this._collapsedPane = target;

    this._internals.setState('start-collapsed', this._isCollapsed('start'));
    this._internals.setState('end-collapsed', this._isCollapsed('end'));

    this._restoreSizesOnExpandCollapse();
  }

stories/splitter.stories.ts:466

• JSON.parse(saved) will throw if localStorage contains invalid/corrupted data for this key (which is easy to end up with during manual testing). That breaks the entire story render. Consider parsing defensively and falling back to defaults when parsing fails.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const layout = saved ? JSON.parse(saved) : null;

    const startSize = layout?.startSize ?? '50%';
    const startCollapsed = layout?.startCollapsed ?? false;
    const endCollapsed = layout?.endCollapsed ?? false;

src/components/splitter/splitter.ts:367

• Same wording issue as startCollapsed: prefer a boolean-state description (“When true…”) over “Gets/sets…”, to match existing docs and generated outputs.

  /**
   * Gets/sets the collapsed state of the end pane.
   * @attr end-collapsed
   * @default false
   */
  @property({ type: Boolean, reflect: true, attribute: 'end-collapsed' })
  public set endCollapsed(value: boolean) {
    this._setCollapsed('end', value);

stories/splitter.stories.ts:462

• JSON.parse(saved) will throw if localStorage contains invalid JSON for this key, which can break the Storybook page entirely. It’s safer to parse with a try/catch and fall back to null.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const layout = saved ? JSON.parse(saved) : null;

src/components/splitter/splitter.ts:514

• startCollapsed/endCollapsed are declared with reflect: true, but collapse changes triggered via toggle() or UI interactions only update _collapsedPane. Since Lit reflects attributes only for changed properties, the start-collapsed/end-collapsed attributes can get out of sync (e.g. switching from endCollapsed=true to startCollapsed=true may leave both attributes present). Consider explicitly requesting updates for both collapsed properties when _collapsedPane changes so reflection stays consistent.

    if (this._collapsedPane === null && target !== null) {
      this._savePaneSizes();
    }

    this._collapsedPane = target;

src/components/splitter/splitter.ts:354

• The new boolean property docs use “Gets/sets …” wording, which is inconsistent with the rest of the component’s boolean API docs (e.g. “When true, …”). Since these descriptions flow into generated docs/Storybook, it’d be better to phrase them as a boolean state description.

This issue also appears on line 360 of the same file.

  /**
   * Gets/sets the collapsed state of the start pane.
   * @attr start-collapsed
   * @default false
   */
  @property({ type: Boolean, reflect: true, attribute: 'start-collapsed' })
  public set startCollapsed(value: boolean) {
    this._setCollapsed('start', value);

src/components/splitter/splitter.ts:170

• _base is queried frequently (e.g. via _getTotalSize() during resizing). Dropping the cached @query(..., true) causes repeated querySelector calls and is inconsistent with _startPane / _endPane (and other components) that cache stable part references.

  @query('[part~="base"]')
  private readonly _base!: HTMLElement;

stories/splitter.stories.ts:470

• JSON.parse(saved) can throw if localStorage contains invalid/corrupted data, which would break the Storybook story rendering. It’s safer to guard parsing and fall back to defaults.

    const saved = localStorage.getItem(PERSISTED_LAYOUT_KEY);
    const layout = saved ? JSON.parse(saved) : null;

src/components/splitter/splitter.ts:506

• The PR description says the feature "includes methods to collapse and expand panes", but the public API in this change exposes startCollapsed/endCollapsed and toggle(position) (no explicit collapse()/expand() methods). Either add the methods or update the PR description to match the actual shipped API.

  /** Toggles the collapsed state of the specified pane. */
  public toggle(position: PanePosition): void {
    // If the requested pane is already collapsed, expand it (set to null)
    // Otherwise, collapse the requested pane (this also handles switching from one collapsed pane to another)
    this._applyCollapse(this._collapsedPane === position ? null : position);

src/components/splitter/splitter.ts:517

• startCollapsed/endCollapsed are reflected properties, but their values are derived from _collapsedPane. When _collapsedPane changes via user interaction (collapse buttons, keyboard) or toggle(), Lit will re-render due to the @state() change, but it will not automatically reflect the derived boolean attributes unless the properties are marked as changed. This can leave start-collapsed / end-collapsed attributes stale compared to the actual collapsed state.

  private _applyCollapse(target: PanePosition | null): void {
    if (this._collapsedPane === null && target !== null) {
      this._savePaneSizes();
    }